<template>
	
	<view class="wrap">
		<view class="goback-wrap" @click="goback">
			<image src="../../static/goback.png" mode=""></image>
		</view>
		<view class="logo">
			<image src="../../static/applogo.png" mode="scaleToFill"></image>
		</view>
		<view class="login-wrap">
			<view class="zuoshangjiao"></view>
			<view class="zuoxiajiao"></view>
			<view class="youshangjiao"></view>
			<view class="youxiajiao"></view>
			<view class="title">忘记密码</view>
			<view class="account">
				<view class="label">
					
					
				</view>
				<view class="ipt-wrap">
					<input v-model="phone" type="text" placeholder-style="color:#fff" placeholder="输入手机号" />
				</view>
			</view>
			<view class="pwd-wrap-code">
				<view class="label">
					
					
				</view>
				<view class="ipt-wrap">
					<input  v-model="code" type="text" placeholder-style="color:#fff" placeholder="输入验证码" />
				</view>
				<view class="get-code" @click="getCode">
					{{btntip}}
				</view>
			</view>
			<view class="pwd-wrap">
				<view class="label">
					
					
				</view>
				<view class="ipt-wrap">
					<input v-model="pwd"  type="password" placeholder-style="color:#fff" placeholder="输入登录密码" />
				</view>
			</view>
			<view class="pwd-wrap-repeat">
				<view class="label">
					
					
				</view>
				<view class="ipt-wrap">
					<input v-model="pwd2"  type="password" placeholder-style="color:#fff" placeholder="重复登录密码" />
				</view>
			</view>
			
			
			<view class="sub-btn" @click="subData">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				time:59,
				pwd:'',
				pwd2:'',
				timer:'',
				code:'',
				phone:'',
				btntip: '获取验证码'
			}
		},
		onLoad() {

		},
		methods: {
			goback(){
				uni.navigateBack();
			},
			subData(){
				let that=this
				
				if(this.phone==''){
					uni.showToast({
					    title: '请输入手机号',
					    duration: 2000,
						icon:'none'
					});
					return
				}
				if(this.code==''){
					uni.showToast({
					    title: '请输入手机验证码',
					    duration:4000,
						icon:'none'
					});
					return
				}
				
				if(this.pwd==''){
					uni.showToast({
					    title: '请输入新密码',
					    duration:4000,
						icon:'none'
					});
					return
				}
				if(this.pwd2!=this.pwd){
					uni.showToast({
					    title: '两次密码不一致',
					    duration:4000,
						icon:'none'
					});
					return
				}
				
				
				
				
				
				
				that.apipost('/api/auth/forgotpwd',{
					phone:that.phone,
					pwd:that.pwd,
					pwd2:that.pwd2,
					code:that.code
				},true).then(res => {
					if(res.Code==10200){
						uni.reLaunch({
							url: '/pages/login/index'
						});
						uni.showToast({
						    title: res.Message,
						    duration:4000,
							icon:'none'
						});
						
					}
					
				}).catch(err=>{
					console.log(err)
				});
			},
			getCode(){
				let that=this
				if(this.phone==''){
					uni.showToast({
					    title: '请输入手机号',
					    duration:4000,
						icon:'none'
					});
					return
				}

				if(that.time!=59){
					return
				}
				that.timer=setInterval(function(){
					if(that.time==1){
						that.btntip='获取验证码'
						clearInterval(that.timer)
						that.time=59
					}else{
						that.btntip=--that.time+'s后获取'
					}
					
				},1000)
				
				that.apiget('/api/auth/SendMobileMsg',{
					phone:that.phone,
					
				},true).then(res => {
					if(res.Code==10200){
						uni.showToast({
						    title: res.Message,
						   duration:4000,
							icon:'none'
						});
						
					}
					
				}).catch(err=>{
					console.log(err)
				});
			},
		}
	}
</script>

<style>
	.goback-wrap{
		position:absolute;
		width:20rpx;
		height:36rpx;
		left:32rpx;
		top:82rpx;
	}
	.sub-btn{
		height:66rpx;
		color:#fff;
		display:flex;
		justify-content: center;
		align-items: center;
		border-radius:8rpx;
		background: url(../../static/loginbtn.png) repeat-x;
		background-size:100% 100%;
		margin-bottom:60rpx;
		margin-top:50rpx;
	}
	.tip-btn{
		display:flex;
		justify-content: space-between;
		color:#039ddd;
		padding:28rpx 0 42rpx 0;
		
	}
	.get-code{
		width:190rpx;
		text-align:right;
	}
	.pwd-wrap-code{
		border-bottom:1rpx solid #fff;
		padding-bottom:4rpx;
		color:#fff;
		display:flex;
		align-items: center;
		margin-top:32rpx;
		justify-content: space-between;
	}
	.pwd-wrap-code .label{
		width:82rpx;
		height:62rpx;
		display:flex;
		align-items: center;
		background:url(../../static/codebg.png) no-repeat 20rpx center;
		background-size:34rpx auto;
	}
	.pwd-wrap{
		border-bottom:1rpx solid #fff;
		padding-bottom:4rpx;
		color:#fff;
		display:flex;
		align-items: center;
		margin-top:32rpx;
		justify-content: space-between;
	}
	.pwd-wrap-repeat{
		border-bottom:1rpx solid #fff;
		padding-bottom:4rpx;
		color:#fff;
		display:flex;
		align-items: center;
		margin-top:32rpx;
		/* justify-content: space-between; */
	}
	.account .ipt-wrap,.pwd-wrap .ipt-wrap,.pwd-wrap-code .ipt-wrap{
		flex:1;
	}
	.pwd-wrap-repeat .label{
		width:82rpx;
		height:62rpx;
		display:flex;
		align-items: center;
		background:url(../../static/xiaosuo.png) no-repeat 20rpx center;
		background-size:34rpx auto;
	}
	.account .label{
		
		background:url(../../static/dengluren.png) no-repeat 20rpx center;
		background-size:34rpx auto;
	}
	.pwd-wrap .label{
		
		background:url(../../static/denglusuo.png) no-repeat 20rpx center;
		background-size:34rpx auto;
	}
	
	.zuoshangjiao{
		position:absolute;
		left:0;
		top:0;
		height:38rpx;
		width:38rpx;
		background: url(../../static/zuoshangjiao.png) no-repeat;
		background-size:100% 100%;
	}
	.zuoxiajiao{
		position:absolute;
		left:0;
		bottom:0;
		height:38rpx;
		width:38rpx;
		background: url(../../static/zuoxiajiao.png) no-repeat;
		background-size:100% 100%;
	}
	.youshangjiao{
		position:absolute;
		right:0;
		top:0;
		height:38rpx;
		width:38rpx;
		background: url(../../static/youshangjiao.png) no-repeat;
		background-size:100% 100%;
	}
	.youxiajiao{
		position:absolute;
		right:0;
		bottom:0;
		height:38rpx;
		width:38rpx;
		background: url(../../static/youxiajiao.png) no-repeat;
		background-size:100% 100%;
	}
	.account .label,.pwd-wrap .label{
		width:82rpx;
		height:62rpx;
		display:flex;
		align-items: center;
	}
	.account input,.pwd-wrap input,.pwd-wrap-code input{
		width:100%;
		height:52rpx;
		
	}
	.account{
		padding-bottom:4rpx;
		border-bottom:1rpx solid #fff;
		color:#fff;
		display:flex;
		align-items: center;
		justify-content: space-between;
	}
	.login-wrap .title{
		color:#fff;
		padding:48rpx 0 44rpx 0;
		text-align:center;
		font-size:50rpx;
		/* font-weight:bold; */
	}
	.logo{
		width:280rpx;
		height:280rpx;
		
		margin:0 auto;
		margin-top:128rpx;
	}
	
	.wrap{
		height:100%;
		overflow: hidden;
		background:url(../../static/registerbg.jpg) no-repeat;
		background-size:100% 100%;
	}
	.login-wrap{
		padding:0 44rpx 5rpx 44rpx;
		box-sizing: border-box;
		
		width:560rpx;
		position:relative;
		background:rgba(255,255,255,.1);
		margin:0 auto;
		margin-top:70rpx;
	}
	
</style>

